<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}组织数据对比{% endblock %}</title>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
    <link rel="shortcut icon" type="image/x-icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    {% block styles %}
    <link href="{{ url_for('static', filename='css/theme.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/base.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/layout.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/components/navbar.css') }}" rel="stylesheet">
    {% endblock %}
    
    <style>
        body {
            padding-top: 60px;
            min-height: 100vh;
            background-color: var(--bg-light);
            color: var(--text-color);
        }

        /* 性能监控样式 */
        .performance-metrics {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 4px 12px;
            gap: 16px;
        }

        .metric-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 8px;
        }

        .metric-label {
            color: var(--text-secondary);
            font-size: 0.85rem;
            font-weight: 500;
        }

        .metric-value {
            font-size: 0.95rem;
            font-weight: 600;
            color: #28a745;
            min-width: 45px;
            text-align: right;
        }

        .metric-value.warning {
            color: #ffc107;
        }

        .metric-value.danger {
            color: #dc3545;
        }

        @media (prefers-color-scheme: dark) {
            .performance-metrics {
                background: rgba(255, 255, 255, 0.05);
            }
            
            .metric-label {
                color: rgba(255, 255, 255, 0.7);
            }
            
            .metric-value {
                color: #2ecc71;
            }
        }

        @media (max-width: 768px) {
            .performance-metrics {
                flex-direction: column;
                gap: 4px;
                padding: 8px;
            }
            
            .metric-item {
                width: 100%;
                justify-content: space-between;
            }
        }
    </style>
    {% block extra_styles %}{% endblock %}
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <i class="fas fa-chart-line me-2"></i>组织数据对比
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarControls">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarControls">
                {% block navbar_left %}
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="displayControl" role="button" data-bs-toggle="dropdown">
                            <i class="fas fa-cogs me-1"></i>显示控制
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <div class="dropdown-item">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="show-total" checked>
                                        <label class="form-check-label" for="show-total">
                                            人员信息对比
                                        </label>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="dropdown-item">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="show-rank" checked>
                                        <label class="form-check-label" for="show-rank">
                                            职级分布对比
                                        </label>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
                {% endblock %}
            </div>
        </div>
    </nav>

    {% block content %}{% endblock %}

    <!-- 基础脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/monitoring.js') }}"></script>
    {% block scripts %}{% endblock %}
</body>
</html> 